<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <title>Todo</title>
</head>
<body>
<div id="root"></div>
<script>
  let state = {
    todos: [{
      text: 'Eat food',
      completed: true
    }, {
      text: 'Exercise',
      completed: false
    }],
    visibilityFilter: 'SHOW_COMPLETED'
  }

  function visibilityFilter(state = 'SHOW_ALL', action) {
    if (action.type === 'SET_VISIBILITY_FILTER') {
      return action.filter;
    } else {
      return state;
    }
  }

  function todos(state = [], action) {
    switch (action.type) {
      case 'ADD_TODO':
        return state.concat([{text: action.text, completed: false}]);
      case 'TOGGLE_TODO':
        return state.map((todo, index) =>
          action.index === index ?
            {text: todo.text, completed: !todo.completed} :
            todo
        )
      default:
        return state;
    }
  }

  function todoApp(state = {}, action) {
    return {
      todos: todos(state.todos, action),
      visibilityFilter: visibilityFilter(state.visibilityFilter, action)
    };
  }

  console.log(state)
  state = todoApp(state, {type: 'ADD_TODO', text: 'Go to swimming pool'});
  console.log(state)
</script>

</body>
</html>